<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script>
        function init(){
            document.getElementById("btn_cookieShow").addEventListener("click",()=>{
                let node = document.getElementsByClassName("cookieSelect")[0];
                if (node.hidden==true) {
                    node.hidden = false;
                    document.getElementById("btn_cookieShow").classList.add("change");
                }else{
                    node.hidden = true;
                    document.getElementById("btn_cookieShow").classList.remove("change");
                }
            },false)
        }
        window.addEventListener("load",init,false);
    </script>
    <style>
            input[type='text'],input[type='password']{
        margin-top: 20px;
        height: 20px;
    }
    input[type='checkbox'] {
        margin-top: 10px;
        margin-left: 0px;
    }
    button {
        margin-top: 20px;
        height: 25px;
    }

    .login_article {
        border: 1px solid #ccc;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width: 500px;
        height: 180px;
        margin: auto;
        border-radius: 5px;
    }

    .login_article_image {
        float: left;
        margin: 20px;
    }

    #btn_login {
        margin-left: 196px;
    }

    .errorMsg {
        margin-top: 10px;
    }
    .login_img{
    width: 110px;
    height: 110px;
    }
    .img_logo{
        width: 50px;
        height: 60px;
        float: right;
        background-image: url(../img/flag.jpg);
        background-position: -270px -140px;
        margin-top: -1px;
        margin-right: 2px;
    }
    #btn_cookieShow{
        background-image: url(../img/small_icons.jpg);
        width: 30px;
        height: 30px;
        float: right;
        margin-right: 5px;
        margin-top: 8px;
        background-position: -90px -290px;
    }
    .cookieSelect{
        margin-top: 5px;
    }
    .change{
        transform: rotate(90deg);
    }
    legend{
        width: 250px; 
    }
    fieldset{
        width: 250px; 
        border: 0px;
    }
    form{
        margin-top: -64px;
    }
    
    </style>
</head>

<body>
    <article class="login_article">
        <aside class="img_logo"></aside>

        <aside class="login_article_image">
            <img class="login_img" src="../img/5.jpg" alt="login">
            <div class="errorMsg">用户名或密码错误！</div>
        </aside>

        <section>
            <fieldset>
                <legend hidden>用户登录</legend>
                <form action="../index.html" method="psot">
                    用户名：
                    <input type="text" name="userNme">
                    <br> 密&nbsp;&nbsp;&nbsp;码：
                    <input type="password" name="password">
                    <br>
                    <div id="btn_cookieShow"></div>
                    <div hidden class="cookieSelect">
                        <input type="checkbox" name="isCookie" value="yes">一周之内不需要登录
                    </div>
                    <button id="btn_login">登陆</button>
                </form>
                
            </fieldset>
        </section>
    </article>
</body>

</html>